import React from "react";

const Index = () => {
    const [form] = React.UI.Form.useForm();

    const [business] = useState<any>(React.Cookies.load('business') ?? {});
    const [list, setList] = useState<Array<any> | []>([]);
    const [hasMore, setHasMore] = useState<boolean>(true);
    const [page, setPage] = useState<number>(1);
    const [show, setShow] = useState<boolean>(false);
    const [guest, setGuest] = useState<any>({
        id: 0,
        busid: business.id,
        nickname: business.nickname,
        mobile: business.mobile,
        gender: business.gender,
        gender_text: business.gender_text
    })

    //下拉刷新方法
    const onRefresh = () => {
        setList(() => []);
        setPage(1);
        setHasMore(true);
    }

    //上拉加载
    const onLoadMore = () => {
        getGuestData();
    }

    const getGuestData = async () => {
        let params: {
            busid: string | number,
            page: number
        } = {
            busid: business.id,
            page: page
        }

        let result = await React.Http.post('/guest/index/', params);

        if (result.code === 1) {
            let ListCount = 0;

            let count = result.data.count ?? 0;
            setList(v => {
                let list = [...v, ...result.data.list];

                ListCount = list.length;

                return list;
            });
            if (count === ListCount) {
                setHasMore(false);

                return false;
            }

            setHasMore(true);
            setPage(page => page + 1);
        } else {
            setHasMore(false);

            React.toast(result.msg, null, 'fail');
        }
    }

    // 添加住客信息
    const onAdd = () => {
        setShow(true);

        let info = guest;

        setGuest(info);

        form.setFieldsValue(info);
    }

    // 侧滑操作栏
    const RightAction = (row: any) => {
        return [
            {
                key: 'edit',
                color: 'primary',
                text: '编辑',
                onclick: () => {
                    setShow(true);

                    setGuest(row);

                    // 修改数据 对表单中的input元素的值进行数据的修改
                    form.setFieldsValue(row);
                }
            },
            {
                key: 'delete',
                color: 'danger',
                text: '删除',
                onClick: async () => {
                    // 弹出提示框
                    let res = await React.UI.Dialog.confirm({
                        title: '删除',
                        content: '是否确认删除住客信息？'
                    })

                    if (res === true) {
                        let params = {
                            guestid: row.id,
                            busid: business.id
                        }

                        let result = await React.Http.post('/guest/del', params);

                        if (result.code === 1) {
                            React.toast(result.msg, () => {
                                onRefresh();
                            })
                        } else {
                            React.toast(result.msg, null, 'fail');
                        }
                    }
                }
            },
        ]
    }
    const onFinish = async (values: any) => {
        values.busid = business.id;

        let result;

        if (guest.id) {

            values.id = guest.id;

            result = await React.Http.post('/guest/edit', values);
        } else {
            result = await React.Http.post('/guest/add', values);
        }

        if (result.code === 1) {

            setShow(false);

            React.toast(result.msg, () => {
                onRefresh();
            })

        } else {
            React.toast(result.msg, null, 'fail');
        }
    }


}

return (
    <>
        {/* 下拉刷新 */}
        <React.UI.PullToRefresh onRefresh={onRefresh}>

            <React.UI.List>

                {list.map((item, key) => (
                    <React.UI.SwipeAction key={key} rightActions={RightAction(item)}>
                        <React.UI.List.Item description={item.mobile}>{item.nickname} ({item.gender_text})</React.UI.List.Item>
                    </React.UI.SwipeAction>
                ))}
            </React.UI.List>

        </React.UI.PullToRefresh>

        <React.UI.InfiniteScroll loadMore={onLoadMore} hasMore={hasMore} threshold={0} />


        {/* 底部按钮 */}
        <div style={{ width: '100%', position: 'fixed', left: '0px', bottom: '0px' }}>
            <React.UI.Button onClick={() => onAdd()} style={{ borderRadius: '0px' }} block color='primary' size='large'>添加住客信息</React.UI.Button>
        </div>

        {/* 弹出层 */}
        <React.UI.Popup visible={show} closeOnMaskClick={true} onMaskClick={() => setShow(false)}>
            <React.UI.Form
                form={form}
                name="guest"
                layout='horizontal'
                mode='card'
                initialValues={guest}
                onFinish={onFinish}
                footer={<React.UI.Button block type='submit' color='primary' size='large'>提交修改</React.UI.Button>}
            >
                <React.UI.Form.Item name="nickname" label="昵称" rules={[{ required: true }]}>
                    <React.UI.Input placeholder="请输入昵称" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="mobile" label="手机号" rules={[{ required: true }, { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对' }]}>
                    <React.UI.Input placeholder="请输入手机号" />
                </React.UI.Form.Item>

                <React.UI.Form.Item name="gender" label="性别" rules={[{ required: true }]}>
                    <React.UI.Radio.Group>
                        <React.UI.Space direction='horizontal'>
                            <React.UI.Radio value='0'>保密</React.UI.Radio>
                            <React.UI.Radio value='1'>男</React.UI.Radio>
                            <React.UI.Radio value='2'>女</React.UI.Radio>
                        </React.UI.Space>
                    </React.UI.Radio.Group>
                </React.UI.Form.Item>

            </React.UI.Form>
        </React.UI.Popup>


    </>

)
}

export default Index;